<template>
	<view>
		<view class="p-1 grid grid-cols-3 gap-1">
			<view v-for="item in state.dataList" :key="item._id" class="h-[440rpx]" @click="toPreview(item)">
				<image class="w-full h-full" :src="item.smallPicurl" mode="aspectFill"></image>
			</view>
		</view>
		<view class="center">
			<uni-load-more :status="state.status" />
		</view>
	</view>
</template>

<script setup>
	import { onLoad, onReachBottom } from '@dcloudio/uni-app'
	import { reactive } from 'vue'
	import { getClassDetail, getWallDetail } from '@/api/home'
	import { useAppStore } from '@/store/modules'
	import { storeToRefs } from 'pinia'
	const { detailList } = storeToRefs(useAppStore())

	const state = reactive({
		classid: null,
		status: 'more',
		total: 0,
		pageNum: 1,
		pageSize: 15,
		dataList: []
	})

	function pageInit() {
		const params = {
			classid: state.classid,
			pageNum: state.pageNum,
			pageSize: state.pageSize
		}
		state.status = 'loading'
		getClassDetail(params)
			.then((res) => {
				state.total = res.total
				state.dataList.push(...res.data)
			})
			.finally(() => {
				status: 'more'
			})
	}

	onLoad((params) => {
		state.classid = params.id
		uni.setNavigationBarTitle({
			title: params.title // 设置导航栏标题
		})
		pageInit()
	})

	onReachBottom(() => {
		if (state.dataList.length >= state.total) return (state.status = 'no-more')
		state.pageNum++
		pageInit()
	})

	function toPreview(item) {
		detailList.value = state.dataList
		uni.navigateTo({
			url: `/pages/preview/index?id=${item._id}`
		})
	}
</script>
